<template>
	<view>
		<view class="container">
			<!-- 宫格 -->
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in dataList" :index="index" :key="index">
					<view class="container_grid_box" @tap="gridClick(item)">
						<i v-if="item.icon" :style="{color: item.color,opacity: item.opacity}" :class="item.icon"
							class="container_grid_box_icon"></i>
						<image v-else-if="item.img" :src="item.img" class="container_grid_box_img"></image>
						<view class="container_grid_box_text">{{item.text}}</view>
						<view v-if="item.badge>0" class="container_grid_box_badge">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- 手持机自带扫描 -->
			<infraredCode></infraredCode>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.dataList = JSON.parse(option.data)
		},
		data() {
			return {
				dataList: [],
				procedureName: "",
			}
		},
		onShow() {
			this.getProceData()
		},
		methods: {
			getProceData() {
				this.procedureName = ""
				let arr = uni.getStorageSync("procedureData")
				if (arr !== "") {
					arr.forEach((item, index) => {
						if (item.switch) {
							this.procedureName = item.procedureName
						}
					})
				}
			},
			gridClick(item) {
				if (item.nav == 'fabric_report') {
					uni.navigateTo({
						url: "./FabricReport/index"
					})
				}
				if (item.nav == 'product_monitor') {
					uni.navigateTo({
						url: "./ProductionMonitor/index"
					})
				}
				if (item.nav == 'product_pick') {
					uni.navigateTo({
						url: "./ProductionPick/index"
					})
				}
				if (item.nav == 'basic_machine') {
					uni.navigateTo({
						url: "./Machine/index"
					})
				}
				if (item.nav == 'warehouse_manage') {
					uni.navigateTo({
						url: "./WarehouseManage/index"
					})
				}
				if (item.nav == 'machine_part') {
					uni.navigateTo({
						url: "./AccessoryManagement/index"
					})
				}
				if (item.nav == 'call_machine') {
					uni.navigateTo({
						url: "./TerminalCall/index"
					})
				}
				if (item.nav == 'handle_call') {
					uni.navigateTo({
						url: "./CallDeal/index"
					})
				}
				if (item.nav == 'product_report') {
					if (this.procedureName) {
						uni.navigateTo({
							url: "./WorkReport/index"
						})
					} else {
						uni.showToast({
							title: this.$t('homepage.procNull'),
							icon: "none",
							duration: 3000
						})
					}
				}
				if (item.nav == 'product_report_nostrict') {
					if (this.procedureName) {
						uni.navigateTo({
							url: "./WorkReportNostrict/index"
						})
					} else {
						uni.showToast({
							title: this.$t('homepage.procNull'),
							icon: "none",
							duration: 3000
						})
					}
				}
				if (item.nav == 'package_manage') {
					uni.navigateTo({
						url: "./Package/index"
					})
				}
				if (item.nav == 'product_salary') {
					uni.navigateTo({
						url: "./OutputWage/index"
					})
				}
				if (item.nav == 'cutting_market') {
					uni.navigateTo({
						url: "./CutMarket/index"
					})
				}
				if (item.nav == 'quality_control') {
					uni.navigateTo({
						url: "./QualityControl/index"
					})
				}
				if (item.nav == 'process_query') {
					uni.navigateTo({
						url: "./ProcessQuery/index"
					})
				}
				if (item.nav == 'printer') {
					uni.navigateTo({
						url: "./Printer/index"
					})
				}
				if (item.nav == 'example') {
					uni.navigateTo({
						url: "./Example/index"
					})
				}
				if (item.nav == 'report') {
					uni.navigateTo({
						url: "./Report/index"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 40rpx;
		width: calc(100% - 60rpx);
		min-height: 100rpx;
		padding: 50rpx 10rpx;
	}

	.container_grid_box {
		padding: 20rpx;
		text-align: center;
	}

	.container_grid_box_icon {
		font-size: 80rpx;
	}

	.container_grid_box_img {
		width: 35px;
		height: 35px
	}

	.container_grid_box_text {
		text-indent: 10rpx;
		margin-top: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.container_grid_box_badge {
		position: absolute;
		top: 5px;
		right: 15px;
	}
</style>